<template>
  <div id="movietab">
        <ul>
            <router-link tag="li" to="/movie/city">
                <span>北京</span>
                <i class="fa fa-caret-down"></i>
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/now">
                <p>正在热映</p>
            </router-link>
            <router-link class="font-color" tag="li" to="/movie/coming">
                <p>即将上映</p>
            </router-link>
            <router-link tag="li" to="/movie/search">
                <i class="fa fa-search"></i>
            </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    #movietab{
        padding-top: 50px;
    }
    #movietab ul{
        box-shadow: 0 0 5px 0 #999;
    }
    #movietab li{
        width: 25%;
        height: 40px;
        text-align: center;
        display: inline-block;
        line-height: 40px;
        font-weight: bold;
    }
    .font-color{
        color: #666;
    }
    .router-link-active{
        color:#e54847
    }
    .fa-search{
        font-size: 24px;
        color: #e54847;
    }
    .router-link-active{
        color:#e54847;
        border-bottom: #e54847 2px solid;
    }
</style>